<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>文档处理--元素替换</title>
	<style>
		div{
			background: lavenderblush;
			padding: 20px;
		}
		p{
			background: lemonchiffon;
			padding: 20px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	<script>
		$(function(){
			//replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
			$("#btn1").click(function(){
				//$("div").replaceWith("<br/>新替换的文本<br/>");
				$("div").replaceWith("<p>新替换的段落</p>");//所有的div被后面的参数替换掉
			});
			//replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。
			$("#btn2").click(function(){
				$("<div>新的div</div>").replaceAll("p");//用前面的内容替换掉所有的段落p
			});
		});
	</script>
</head>
<body>
	<button id="btn1">replaceWith</button>
	<button id="btn2">replaceWithAll</button>
	<div>
		div1
	</div>
	<br />
	<div>
		div2
	</div>
	<p>p1</p>
	<p>p2</p>
</body>
</html>